﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../../scripts/lib/layui/css/layui.css" rel="stylesheet" />
	<script src="../../scripts/lib/layui/layui.js"></script>

	<style>

	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="layui-carousel" id="test1">
			<div carousel-item >
				<div style="background-color:#57792D">条目1</div>
				<div style="background-color:#1E5D9D">条目2</div>
				<div style="background-color:#1E1E1E">条目3</div>
				<div style="background-color:#686868">条目4</div>
				<div style="background-color:#99481E">条目5</div>
			</div>
		</div>
	</div>
	<script>
		layui.use(['carousel'], function (carousel) {
			carousel.render({
				elem: '#test1'
				, width: '100%' //设置容器宽度
				, arrow: 'always' //始终显示箭头
				,anim: 'fade' //切换动画方式
				//, full: true
				//, arrow: 'none'
				, indicator:"outside"

			});
		});
	</script>
</body>
</html>